<template>
    <div class="main">

        <div class="top">
            <p>垃圾箱</p>
            <div class="search">
                <el-input v-model="input2" placeholder="请输入...">
                    <el-button icon="el-icon-search" slot="append"></el-button>
                </el-input>
            </div>
        </div>

        <div class="middle">
            <el-table :data="gridData">
                <el-table-column property="xuanZe" label="选择" width="80">
                    <template>
                        <el-checkbox label=""></el-checkbox>
                    </template>
                </el-table-column>
                <el-table-column property="type" label="类型" width="80"></el-table-column>
                <el-table-column property="name" label="收件人" width="100"></el-table-column>
                <el-table-column property="title" label="主题" width="200"></el-table-column>
                <el-table-column property="time" label="时间" width="200"></el-table-column>
                <el-table-column property="fuJian" label="附件" width="200"></el-table-column>
                <el-table-column property="status" label="状态" width="80"></el-table-column>
                <el-table-column label="操作">
                    <el-button type="primary" icon="el-icon-search" @click="chaKan()">查看</el-button>
                    <el-button type="danger" icon="el-icon-close" @click="open">删除</el-button>
                </el-table-column>
            </el-table>
        </div> 

        <!-- 页码内容 -->
        <div class="pages clear">
            <div class="leftPage">
                <span>共 <b>3</b> 条 | 每页 <b>20</b> 条 | 共 <b>6</b> 页</span>
            </div>
            <div class="rightPage">
                <el-pagination background layout="prev, pager, next" :total="60"></el-pagination>
            </div>
        </div>
    </div>
</template>
<script>
export default {
// eslint-disable-next-line vue/multi-word-component-names
name:"",
components:{},
data(){
    return {
        gridData:[
            {
                xuanZe:'',
                type:'邮件',
                name:'张三',
                title:'鲜花',
                time:'2022/1/20 15:20:03',
                fuJian:'',
                status:'一般'
            },
             {
               xuanZe:'',
               type:'邮件',
                name:'张三',
                title:'鲜花',
                time:'2022/1/20 15:20:03',
                fuJian:'',
                status:'一般'
            },
             {
                xuanZe:'',
                type:'邮件',
                name:'张三',
                title:'鲜花',
                time:'2022/1/20 15:20:03',
                fuJian:'',
                status:'一般'
            }
        ]
    }
    },
    methods:{
        chaKan(){
            this.$router.push('/home/emailManagement/emailManagementHome/emailChaKan')
        },
        //删除的确认弹框
        open() {
        this.$confirm('删除该记录将不能恢复，确定删除吗？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });
      }
    }
}
</script>
<style lang="less" scoped>
.main{
    background-color: white;
    padding: 10px 20px;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
}
.top{
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid rgba(161, 158, 158, 0.452);
    padding-bottom:10px;
    box-sizing: border-box;
}
.top p{
    font-size: 18px;
}
.search{
    width: 30%;
}
 .pages{
        background-color: #FAFAFA;
        padding: 20px;
        box-sizing: border-box;
        .leftPage{
            float: left;
        }
        .rightPage{
            float: right;
        }
    }
</style>